<script>
import {answer, create_qa, get_q, login} from "@/middleware/interface";
import {InfoFilled, Warning} from "@element-plus/icons-vue";
import {ElMenu, ElMessage} from "element-plus";

export default {
  components: {Warning, InfoFilled},
  data() {
    return {
      qid: "",
      question: '',
      status: 0,//1-完成
    };
  },
  mounted() {
    this.qid = this.$route.params.qid
    this.getData()
  },
  methods: {
    closeWeb() {
      // console.log(1345)
      // window.open('', '_self').close()
    },
    async submit() {
      const res = await answer({
        qid: this.qid,
        content: JSON.stringify(this.question),
      })
      this.status = 1
      localStorage[this.qid] = true
    },
    async getData() {
      if (localStorage[this.qid]) {
        this.status = 1
        return
      }
      const res = await get_q({
        qid: this.qid
      })
      try {
        this.question = JSON.parse(res.content)
      } catch (e) {
      }
    }
  },
};
</script>

<template>
  <div class="w-full h-full flex flex-col items-center">
    <div v-if="qid===''" class="py-20 flex items-center">
      <el-icon class="mr-2">
        <Warning/>
      </el-icon>
      请指定问卷编号
    </div>
    <div v-else class=" max-w-4xl w-full px-3 py-3">
      <div v-if="status===0"
           class="top_card bg-white w-full px-4 sm:px-8 py-4 rounded-xl relative flex flex-col items-center">
        <img src="../assets/img/sketch.svg" class="media_img absolute left-1/2 -top-24" alt=""
             style="">

        <div class="flex items-center mt-3">
          <img src="../assets/img/decoration.svg" class="sm:block hidden" style="height: 20px;width: 33.4px;">
          <div class="font-bold text-center question_title" style="">{{ question["title"] || "此问卷已失效" }}</div>
          <img src="../assets/img/decoration.svg" class="sm:block hidden"
               style="transform: rotate(180deg);height: 20px;width: 33.4px;">
        </div>
        <div class="mt-2 sm:mt-6 mb-6 sm:mb-8 text-gray-500 text-center">{{ question["tip"] }}</div>

        <div v-for="(item,index) in question.questions" class="w-full">
          <div :class="{
            red_dot: item.is_required,
            input_title: true,
          }" style=" font-weight: bold;">{{ index + 1 }}.{{ item.title }}
          </div>
          <input type="text" class="w-full border px-4 py-3 mt-4 mb-7 rounded-xl" v-model="item.prefix">
        </div>

      </div>

      <div v-else class="top_card bg-white w-full px-4 sm:px-8 py-4 rounded-xl relative flex flex-col items-center">
        <img src="../assets/img/sketch.svg" class="media_img absolute left-1/2 -top-24" alt=""
             style="">

        <img src="../assets/img/done.svg" class=" w-16 h-16 mt-8">
        <div class="mt-8 text-center mb-24" style="font-size: 17px">填写完毕，非常感谢您参加此次会议！</div>
        <!--        <div @click="closeWeb()"-->
        <!--             class=" hover:opacity-50 cursor-pointer select-none px-8 py-1.5 text-white mt-12 mb-16 font-bold rounded"-->
        <!--             style="background: #0a1ade; font-size: 14px;">完成-->
        <!--        </div>-->

      </div>


      <div v-if="question&&status===0" class="mt-10 mb-10">
        <div class=" text-center thanks" style="">填写完毕，非常感谢您参加此次会议！</div>
        <div class=" mt-5 flex justify-center">
          <div @click="submit()"
               class="text-white px-12 py-2 rounded hover:opacity-50 transition cursor-pointer select-none"
               style="background: #0a1ade">提交
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.media_img {
  transform: translateX(-50%);
  width: 210px;
  height: 140px;
}

.top_card {
  padding-top: 64px;
  margin-top: 112px;
}

.question_title {
  color: #0a1ade;
  font-size: 20px;
  margin: 0 5px;
}

.input_title {
  font-size: 17px;
}

.thanks {
  font-size: 17px;
}

@media screen and (max-width: 560px) {
  .thanks {
    font-size: 15px;
  }

  .input_title {
    font-size: 16px;
  }

  .question_title {
    font-size: 18px;
    color: black;

  }

  .top_card {
    padding-top: 150px;
    margin-top: 10px;
  }

  .media_img {
    transform: scale(80%) translateX(-50%) translateY(100%);
  }
}


.red_dot {
  position: relative;
}

.red_dot::before {
  content: '*';
  position: absolute;
  left: -10px;
  color: red;
}

</style>
